<script setup lang="ts">
import { find } from "lodash";
import { ref } from "vue";
import { LMarker, LPopup } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";
import { useLocalStore } from "../../../store/index";
import { MAP_ACTION } from "@/views/pipe-network/constants";
import { deletePoint, queryPoints } from "@/api/pipe";
import LMarkerClusterGroup from "../MarkerCluster/index.vue";
import "vue-leaflet-markercluster/dist/style.css";
import { getAssetsFile } from "@/utils/map";
import DangerAPI from "@/api/DangerAPI";
import moment from "moment";
const { L }: any = window;
const pointListRef = ref([]);
const dialogVisible = ref<boolean | number>(false);
const mapStore = useMapStore();
const { mapAction } = storeToRefs(mapStore);
const localStore = useLocalStore();
const { markerClusterFlag, visiblePointClassIds } = storeToRefs(localStore);
const mck = ref(0);

const getAllPoints = () => {
  let params = {
    StartTime: moment(new Date()).format("YYYY-MM-DD 00:00:00"),
    EndTime: moment(new Date()).format("YYYY-MM-DD 23:59:59"),
  };
  DangerAPI.api_insp_task_user(params).then(({ data, errors, succeeded }) => {
    if (succeeded) {
      pointListRef.value = data
        .filter((item: any) => item.longitude)
        .map((item: any) => {
          return {
            ...item,
            latlng: [item.latitude, item.longitude],
            icon: getIcon(),
          };
        });
    }
  });
};

const getIcon = () => {
  const iconUrl = getAssetsFile("icons/personLocation.svg");
  return L.icon({
    iconUrl,
    iconSize: [32, 32],
    iconAnchor: [16, 27],
  });
};

onMounted(() => {
  getAllPoints();
});
</script>

<template>
  <LMarker
    :key="inspUserId"
    v-for="{ latlng, inspUserId, icon } in pointListRef"
    :lat-lng="latlng"
    :icon="icon"
    :attribution="{ inspUserId }"
  >
  </LMarker>
</template>

<style scoped lang="scss"></style>
